<!DOCTYPE html>
<html>
<head>
        
        <title>Demo Chat</title>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
        <link href="bootstrap.css" rel="stylesheet">

	<style>
		body { 
			padding:20px;
		}
		#console { 
			height: 400px; 
			overflow: auto; 
		}
		.username-msg {color:orange;}
		.connect-msg {color:green;}
		.disconnect-msg {color:red;}
		.send-msg {color:#888}
	</style>


	<script src="js/socket.io/socket.io.js"></script>
        <script src="js/moment.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/chat.js"></script>
	
	<script>
var socket,username,room,botChat;
$(document).ready(function(){
        var username = qs.username||'jacky';
        room=qs.room||'abc';
        botChat=(room=='bot')

		socket =  io.connect('http://localhost:9979?username='+username);

		socket.on('connect', function() {
		    socket.emit('login',{username:'a',password:'b'},function(data,a,c,d){
		        if(botChat){
		            socket.emit('bot:start',{room:room},function(data){
		                room=data.room;
                    });

		        }else{
		            socket.emit('chat:join',{room:room},function(data){
                        socket.emit('chat:history',{room:room},function(data){
                            for(var i=0;i<data.messages.length;i++){
                                var msg=data.messages[i];
                                output('<span class="username-msg">' + msg.from.displayName + ':</span> ' + msg.content,msg.sendTime);
                            }
                        });
                    });

		        }

		    });
			output('<span class="connect-msg">Client has connected to the server!</span>');
		});
		
		socket.on('chat:message', function(data) {
			output('<span class="username-msg">' + data.user.displayName + ':</span> ' + data.message);
		});

		socket.on('user:present', function(user,room) {
			output('<span class="username-msg">' + user.displayName + ':</span> 加入了。' );
		});
		socket.on('disconnect', function() {
			output('<span class="disconnect-msg">The client has disconnected!</span>');
		});
});
                function sendDisconnect() {
                        socket.disconnect();
                }
		
		function sendMessage() {
                        var message = $('#msg').val();
                        $('#msg').val('');
                        
                        var jsonObject = {username: username,
                                          message: message,room:room};
                        if(botChat){
                            socket.emit('bot:message', jsonObject,function(data){
                                console.log(data);
                            });
                        }else{
                            socket.emit('chat:message', jsonObject,function(data){
                                console.log(data);
                            });
                        }

		}
		
		function output(message,sendTime) {
		    if(!sendTime)
		        sendTime=new Date();
		    else
		        sendTime=new Date(sendTime);

            var currentTime = "<span class='time'>" +  moment(sendTime).format('HH:mm:ss.SSS') + "</span>";
            var element = $("<div>" + currentTime + " " + message + "</div>");
			$('#console').prepend(element);
		}

	</script>
</head>

<body>
	
	<h1>Netty-socketio Demo Chat</h1>
	
	<br/>

	<div id="console" class="well">
	</div>

        <form class="well form-inline" onsubmit="return false;">
           <input id="msg" class="input-xlarge" type="text" placeholder="Type something..."/>
           <button type="button" onClick="sendMessage()" class="btn">Send</button>
           <button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>
        </form>
    

	
</body>

</html>
